<template>
  <div>
    <div ref="pie" class="view">
    </div>
    <!-- 审核意见 -->
    <el-dialog title="运维资金分类" :visible.sync="show" width="50%" @cancel="show = false" :destroy-on-close="true"
      top="20px">
      <el-table :data="dataType" ref="tableData" border height="500">
        <el-table-column prop="third_type" label="运维类型"> </el-table-column>
        <el-table-column prop="apply_amount" label="运维金额（万元）" sortable> </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  props: {

  },
  data () {
    return {
      dataType: [],
      typeData: [],
      show: false
    }
  },
  created () {

  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      // 运维资金分类处理
      const res = await this.$http('viewAllDetails', {

      })
      let sortAmount = 0
      let hardAmount = 0
      // let serveAmount = 0
      let typeData = []
      this.dataType = res
      res.forEach(item => {
        // 归类资产类型
        if (item.one_type === '软件服务') {
          sortAmount = item.apply_amount + sortAmount
        } else if (item.one_type === '硬件服务') {
          hardAmount = hardAmount + item.apply_amount
        } else if (item.one_type === '购买服务') {
          typeData.push({ value: item.apply_amount, name: item.two_type })
          // serveAmount = serveAmount + item.apply_amount
        }
      })
      sortAmount ? sortAmount = sortAmount.toFixed(4) : '0'
      hardAmount ? hardAmount = hardAmount.toFixed(4) : '0'
      // serveAmount ? serveAmount = serveAmount.toFixed(4) : '0'
      typeData.push(
        { value: sortAmount, name: '软件服务' },
        { value: hardAmount, name: '硬件服务' },
        // { value: serveAmount, name: '购买服务' }
      )

      // 归类整合
      let typeObj = {}
      let typeList = []
      for (let i = 0; i < typeData.length; i++) {
        let item = typeData[i]
        if (!typeObj[item.name]) {
          // 没有对应name的push进typeList ,typeObj[name] = item
          typeList.push({ name: item.name, value: item.value })
          typeObj[item.name] = item
        } else {
          // 有对应的typeObj[name]，typeList相加
          for (let j = 0; j < typeList.length; j++) {
            let item1 = typeList[j]
            if (item1.name == item.name) {
              item1.value = parseInt(item1.value) + parseInt(item.value)
              break
            }
          }
        }
      }
      this.typeData = typeList



      let pie = this.$echarts.init(this.$refs.pie);
      pie.setOption({
        title: {
          text: '运维资金分类',
          left: '10',
          top: '5',
          // 点击事件
          triggerEvent: true,
        },
        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} 万元 ({d}%)'
        },
        legend: {
          show: false,
          orient: 'vertical',
          left: 10
          // data: this.typeData.value
        },
        series: [
          {
            top: 15,
            name: '运维资金',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              align: 'left',
              normal: {
                formatter (v) {
                  let text = v.name
                  // Math.round(v.percent)+'%' + '' +
                  if (text.length <= 6) {
                    return text
                  } else if (text.length > 6 && text.length <= 12) {
                    return text = `${text.slice(0, 6)}\n${text.slice(6)}`
                  } else if (text.length > 12 && text.length <= 18) {
                    return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12)}`
                  } else if (text.length > 18 && text.length <= 24) {
                    return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18)}`
                  } else if (text.length > 24) {
                    return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18, 24)}\n${text.slice(24)}`
                  }
                },
                textStyle: {
                  fontSize: 12
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '15',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: this.typeData
          }
        ]
      })
      pie.on('click', params => {
        this.show = true
      }
      )
    },
  },
  computed: {

  },
}
</script>
<style lang='scss' scoped>
.view {
  width: 100%;
  height: 30rem;
}
</style>
